<template>
	<view class="container bar">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
			<block slot="right" v-if="ispost">
				<view class="action" @click="ispost=false">
					<text class="text-lg text-boldm">取消</text>
				</view>
			</block>
		</cu-custom>
		<view class="postform" v-if="ispost">
			<view class="head">
				<view class="cover" v-if="cover">
					<image :src="cover" mode="aspectFill"></image>
					<button @click="ChooseCover" class="cu-btn bg-yellow sm round text-white">重新上传</button>
				</view>
				<view @click="ChooseCover" class="uploader text-center" v-else>
					<view class="nocover">
						<image src="@/static/images/img_no_cover.png" mode="aspectFit"></image>
					</view>
					<view class="text-muted padding-xs">
						<text>点击添加章节封面(视频自动截取封面)</text>
					</view>
				</view>
			</view>
			<view class="padding padding-top-xs">
				<view class="cu-form-group flex flex-direction must">
					<view class="text-boldm">章节标题</view>
					<view class="input-block">
						<input placeholder="请输入章节标题" v-model="postdata.title" name="title"></input>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="text-boldm">章节状态</view>
					<radio-group @change="ChangeStatus">
						<label>
							<radio class='red radio' :class="postdata.status==1?'checked':''" :checked="postdata.status==1?true:false" value="1"></radio>
							<text class="padding-left-sm">显示</text>
						</label>
						<label class="margin-left padding-left">
							<radio class='red radio' :class="postdata.status==0?'checked':''" :checked="postdata.status==0?true:false" value="0"></radio>
							<text class="padding-left-sm">隐藏</text>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="text-boldm">章节类型</view>
					<radio-group @change="ChangeSectype">
						<label>
							<radio class='red radio' :class="postdata.type==0?'checked':''" :checked="postdata.type==0?true:false" value="0"></radio>
							<text class="padding-left-xs">视频</text>
						</label>
						<label class="margin-left-sm padding-left-xs">
							<radio class='red radio disabled' disabled :class="postdata.type==1?'checked':''" :checked="postdata.type==1?true:false" value="1"></radio>
							<text class="padding-left-xs text-gray">音频</text>
						</label>
						<label class="margin-left-sm padding-left-xs">
							<radio class='red radio disabled' disabled :class="postdata.type==2?'checked':''" :checked="postdata.type==2?true:false" value="2"></radio>
							<text class="padding-left-xs text-gray">图文</text>
						</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="text-boldm">显示顺序</view>
					<view class="input-block">
						<input placeholder="从大到小排序,默认按时间" v-model="postdata.displayorder" name="displayorder"></input>
					</view>
				</view>
				<view class="cu-form-group must" v-if="postdata.type<2">
					<view class="text-boldm">{{postdata.type==0?'视':'音'}}频时长</view>
					<view class="input-block">
						<input placeholder="例如:1小时5分" v-model="postdata.duration" name="duration"></input>
					</view>
				</view>
				<view class="padding-left padding-right" v-if="postdata.type==0">
					<view class="bg-gray text-center radius padding-top-xl padding-bottom" v-if="postdata.videourl!=''">
						<view class="text-xxxl">
							<text class="cuIcon-roundcheck text-green"></text>
						</view>
						<text class="text-green">视频已上传</text>
						<view class="cu-bar btn-group padding">
							<button class="cu-btn bg-green shadow-blur round" @click="showmodal='previewvideo'">预览</button>
							<button class="cu-btn bg-red shadow-blur round" @click="ChooseVideo">重新上传</button>
						</view>
					</view>
					<view @click="ChooseVideo" class="bg-gray text-center radius padding-top-xl padding-bottom-xl" v-else>
						<view class="text-xxxl">
							<text class="cuIcon-add text-gray"></text>
						</view>
						<text class="text-muted">上传课程视频</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white" v-else>
			<view class="text-empty text-center" v-if="data.sections.length==0">
				<text>空空如也</text>
			</view>
			<view class="sectionlist" v-else>
				<view class="cu-list menu sm-border sections margin-top card-menu">
					<view class="cu-item arrow" @click="EditSection(item.id)" v-for="(item, index) in data.sections" :key="index">
						<view class="content padding-tb-sm">
							<view class="title">
								<image src="@/static/images/img_lesson_play.png" class="png" mode="aspectFit"></image> {{item.title}}
							</view>
							<view class="text-sub padding-left-xxl">
								时长：{{item.duration==''?'未知':item.duration}} <text class="text-gray text-sm margin-left-sm margin-right-sm">|</text> {{item.views}}次{{item.type==2?'学习':'播放'}} 
								<text class="text-gray text-sm margin-left-sm margin-right-sm">|</text>
								<text :class="'text-'+(item.status==1?'green':'gray')">{{item.status==1?'显示':'隐藏'}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-center padding">
					<text class="text-grey">共{{data.sections.length}}节课时</text>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="showmodal=='previewvideo'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">预览视频</view>
					<view class="action" @tap="showmodal=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" v-if="showmodal=='previewvideo'">
					<video v-if="videourl!=''" id="myVideo" autoplay="true" show-mute-btn="true" :src="videourl" :poster="cover" initial-time="0"></video>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="ChooseVideo">重新上传</button>
						<button class="cu-btn bg-green margin-left" @tap="showmodal=''">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-bar tabbar">
			<view class="action" v-if="ispost">
				<button @click="SaveSection" class="cu-btn lg margin-bottom-sm bg-gradual-green" :class="sid>0?'round-bottomleft-only':'round'">保存</button>
				<button @click="RemoveSection" v-if="sid>0" class="cu-btn lg round-right-only margin-bottom-sm bg-gradual-orange">删除</button>
			</view>
			<view class="action" v-else>
				<button @click="EditSection(0)" class="cu-btn lg round margin-bottom-sm bg-gradual-yellow">新增章节</button>
			</view>
		</view>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	
	export default {
		data() {
			return {
				id:0,
				sid:0,
				cover:"",
				showmodal:"",
				videourl:"",
				postdata:{
					title:"",
					cover:"",
					type:0,
					videourl:"",
					duration:"",
					displayorder:0,
					status:1
				},
				ispost:false,
				data:{
					title:"章节管理",
					lesson:{
						id:0
					},
					sections:[]
				}
			}
		},
		onLoad(options) {
			if(typeof(options.id)=='undefined' || !options.id) return core.toast('参数错误：无效的课程编号','back');
			this.id = options.id;
			this.initData('lector/section',{id:this.id});
		},
		onBackPress(e) {
			if(this.ispost){
				this.ispost = false;
				this.sid = 0;
				return true;
			}
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
						return core.report(res, true);
					}
					that.data = res;
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}
				},data);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			unSupport(){
				return core.toast('敬请期待');
			},
			EditSection(sid=0){
				this.sid = sid;
				if(sid==0){
					this.cover = "",
					this.videourl = "",
					this.postdata = {
						title:"",
						cover:"",
						type:0,
						videourl:"",
						displayorder:0,
						duration:"",
						status:1
					}
					this.ispost = true;
				}else{
					var that = this;
					return core.get('lector/section',function(res){
						if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined') return that.sid=0,core.report(res);
						that.cover = res.cover;
						that.videourl = res.videourl;
						that.sid = res.section.id;
						for(let i in that.postdata){
							that.postdata[i] = res.section[i];
						}
						that.ispost = true;
					},{op:'detail',id:this.id,sid:this.sid},'json',true);
				}
			},
			SaveSection(){
				if(this.postdata.title=='') return core.toast('请输入章节标题');
				if(this.postdata.type<2 && this.postdata.duration=='') return core.toast('请输入音视频时长');
				if(this.postdata.type<2 && this.postdata.videourl=='') return core.toast('请上传音视频文件');
				var that = this;
				return core.post('lector/section',function(res){
					if(res.type!='success') return core.report(res);
					core.toast(res.message,'','success');
					that.sid = 0;
					that.ispost = false;
					that.initData('lector/section',{id:that.id});
				},{op:'save',data:this.postdata,id:this.id,sid:this.sid})
			},
			RemoveSection(){
				if(this.sid==0) return false;
				var that = this;
				return core.confirm('删除后不可恢复，是否确定要删除？','删除章节',function(){
					core.get('lector/section',function(res){
						if(res.type!='success') return core.report(res);
						core.toast(res.message,'','success');
						that.sid = 0;
						that.ispost = false;
						that.initData('lector/section',{id:that.id});
					},{op:'remove',id:that.id,sid:that.sid});
				});
			},
			ChangeStatus(e){
				this.postdata.status = e.detail.value;
			},
			ChangeSectype(e){
				this.postdata.type = e.detail.value;
			},
			ChooseCover(){
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						core.upload(res.tempFilePaths[0],function(res){
							that.cover = res.url;
							that.postdata.cover = res.path;
						});
					}
				});
			},
			ChooseVideo(){
				var that = this;
				uni.chooseVideo({
					compressed: false, //默认9
					count: 1,
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						core.upload(res.tempFilePath,function(res){
							that.postdata.videourl = res.path;
							that.videourl = res.url;
						},'video');
					}
				});
			}
		}
	}
</script>

<style>
	page{background: #FFFFFF;}
	.cover{position: relative;}
	.cover .cu-btn{position: absolute; right: 20upx; bottom: 20upx;}
	.uploader{padding: 130upx 0; background: #F7F7F7;}
	.nocover image{width: 78upx; height: 63upx;}
	.cu-bar.tabbar .cu-btn{min-width: 50vw;}
	.cu-bar.tabbar .cu-btn ~ .cu-btn{min-width: 30vw;}
</style>
